<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<ul>
			<li>
				Animals
				<ul>
					<li>
						Mammals
						<ul>
							<li>Cows</li>
							<li>Donkeys</li>
							<li>Dogs</li>
							<li>Tigers</li>
						</ul>
					</li>
					<li>
						Other
						<ul>
							<li>Snakes</li>
							<li>Birds</li>
							<li>Lizards</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				Fishes
				<ul>
					<li>
						Aquarium
						<ul>
							<li>Guppy</li>
							<li>Angelfish</li>
						</ul>
					</li>
					<li>
						Sea
						<ul>
							<li>Sea trout</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>

		<script>
			let lis = document.querySelectorAll('li')

			for (const li of lis) {
				const len = li.querySelectorAll('li').length
				if (len > 0) li.firstChild.data += `[${len}]`
			}
		</script>
	</body>
</html>
